<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <!--<Alert style="text-align: justify; padding-right: 15px;">
          当多个组件需要同时使用同一个API接口或数据库查询返回的数据源结果集时，在不使用共享数据源时，每一个组件都需要各自配置关联的数据源，
          这就会造成页面加载多次请求同一个数据源造成不必要的资源浪费。共享数据源就是为解决此问题而生，我们可以将数据结果集统一由共享数据源组件调取，
          然后在任意多个组件中选择关联共享数据源，这样就可以减少页面中多余的数据源请求，优化页面加载性能。
        </Alert>-->

        <Form :label-width="110">
          <FormItem label="备注名称">
            <Input size="small" v-model="layoutItemAliasName"/>
          </FormItem>
          <FormItem label="是否显示">
            <Tooltip content="页面发布前，建议将此配置设置为关闭状态，即为不显示" :max-width="200" placement="left">
              <i-switch size="small" v-model="layoutItemDisplay" :true-value="'block'" :false-value="'none'">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </Tooltip>
          </FormItem>
          <FormItem label="静态数据延迟加载">
            <Tooltip content="当使用静态数据作为共享数据源时，如果被其他组件关联，而在页面发布状态下，无法正常显示共享数据源的静态数据，那么可以尝试将此参数上调" :max-width="200" placement="left">
              <InputNumber size="small" :max="1000000" :min="100" :step="100" v-model="staticDataTimeout" :active-change="false"></InputNumber> 毫秒
            </Tooltip>
          </FormItem>
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="ShareDatasourceComp" :dsTypesSelectData="dsTypesSelectData"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
          <FormItemPanel>
            <div slot="title">
              <span>动态加载前执行脚本 </span>
              <Tooltip content="当采用API、数据库作为数据源时，当数据调用开始前执行的脚本，此脚本只在预览或发布状态下才会运行，作用域与初始化运行脚本中相同" placement="top" max-width="200">
                <Icon type="md-information-circle" size="15"/>
              </Tooltip>
            </div>
            <CodeEditor v-model="dynamicDatasourceBeforeCallRunCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'ShareDatasourceCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {
        dsTypesSelectData: [
          {label: '静态数据', value: 'static'},
          {label: 'API', value: 'api'},
          {label: '数据库', value: 'database'},
          {label: 'WebSocket', value: 'websocket'}
        ]
      }
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        staticDataTimeout: 'component.compConfigData.staticDataTimeout',
        dynamicDatasourceBeforeCallRunCode: 'component.compConfigData.dynamicDatasourceBeforeCallRunCode',
        layoutItemAliasName: 'aliasName',
        layoutItemDisplay: 'layoutItemConfigData.display',

      })
    }
  }
</script>

<style scoped>

</style>
